<template>
  <el-container style="height: 100%; background-color: #f2f3f5">
    <el-aside width="200px">
      <div class="menu-name" style="height: 60px">
        <h1
          style="
            text-align: center;
            line-height: 60px;
            color: #fff;
            font-size: 17px;
          "
        >
          ElementUI测试
        </h1>
      </div>
      <Menu></Menu>
      <!-- <router-link to="/second">进入二级路由</router-link> -->
    </el-aside>
    <el-container style="background-color: #f2f3f5">
      <el-header style="background-color: #fff">
        <Header></Header>
      </el-header>
      <Breadcrumb></Breadcrumb>
      <el-main
        style="
          margin: 10px;
          background-color: #fff;
          border-radius: 7px;
          overflow: hidden;
        "
      >
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import Menu from '@/components/Menu.vue'
import Breadcrumb from '@/components//Breadcrumb.vue'
import Header from '@/components/Header.vue'
</script>

<style scoped>
.el-aside {
  background-color: #2c2e2f;
}
.el-header {
  background-color: cadetblue;
}

.el-header {
  display: flex;
  align-items: center;
}
</style>
